<template>
  <div class="membership-package">
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="100px" class="ruleForm">
        <!-- <el-form-item label="套餐ID：" prop="id">
          <el-input v-model="ruleForm.id" />
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" @click="onSubmit">查询</el-button> -->
          <el-button type="primary" @click="create">创建套餐</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="isLoading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="id"
          label="套餐ID"
          width="120"
          align="center"
        />
        <el-table-column
          prop="name"
          label="套餐名称"
          width="250"
          align="center"
        />
        <el-table-column
          prop="current_price"
          label="当前价格"
          width="120"
          align="center"
        />
        <el-table-column
          prop="original_price"
          label="原价"
          width="180"
          align="center"
        />
        <el-table-column
          prop="valid_days"
          label="有效天数"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
            <el-button type="text" size="small" @click="handleUpdate(scope.row, scope.$index)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="创建套餐" :visible.sync="dialogFormVisible" width="500px">
      <el-form ref="mealForm" :model="mealForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="套餐名称：" prop="name">
          <el-input v-model="mealForm.name" />
        </el-form-item>
        <el-form-item label="现价：" prop="currentPrice">
          <el-input v-model="mealForm.currentPrice" placeholder="单位元" />
        </el-form-item>
        <el-form-item label="原价：" prop="originalPrice">
          <el-input v-model="mealForm.originalPrice" placeholder="单位元" />
        </el-form-item>
        <el-form-item label="有效期限：" prop="validDays">
          <el-input v-model="mealForm.validDays" placeholder="单位天" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createSubmit('mealForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { memberPackageSearch, memberPackageSave, memberPackageDelete, memberPackageUpdate } from '@/api/user'
export default {
  data() {
    return {
      ruleForm: {
        pageNumber: 1
      },
      tableData: [],
      total: 0,
      isLoading: false,
      mealForm: {},
      dialogFormVisible: false,
      isUpdate: false,
      rules: {
        name: [
          { required: true, message: '请套餐名称', trigger: 'change' }
        ],
        currentPrice: [
          { required: true, message: '请输入当前价格', trigger: 'change' }
        ],
        originalPrice: [
          { required: true, message: '请输入原价', trigger: 'change' }
        ],
        validDays: [
          { required: true, message: '请输入有效天数', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.memberPackageSearch()
  },
  methods: {
    memberPackageSearch() {
      this.isLoading = true
      memberPackageSearch(this.ruleForm).then(res => {
        this.tableData = res.list
        this.total = res.totalRow
        this.isLoading = false
      }).catch(() => {
        this.isLoading = false
      })
    },
    createSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isUpdate) {
            memberPackageUpdate(this.mealForm).then(res => {
              this.$message({
                type: 'success',
                message: '更新成功!'
              })
              this.memberPackageSearch()
            })
          } else {
            memberPackageSave(this.mealForm).then(res => {
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
              this.ruleForm.pageNumber = 1
              this.memberPackageSearch()
            })
          }
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleDelete(row, index) {
      this.$confirm('是否删除此套餐?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        memberPackageDelete({
          id: row.id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.tableData.splice(index, 1)
        })
      })
    },
    handleUpdate(row) {
      const { current_price, name, original_price, valid_days, id } = row
      this.mealForm = {
        id,
        name,
        currentPrice: current_price,
        originalPrice: original_price,
        validDays: valid_days
      }
      this.dialogFormVisible = true
      this.isUpdate = true
    },
    onSubmit() {
      this.ruleForm.pageNumber = 1
      this.memberPackageSearch()
    },
    create() {
      this.mealForm = {}
      // this.$refs['mealForm'].resetFields()
      this.dialogFormVisible = true
      this.isUpdate = false
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNumber = page
      this.memberPackageSearch()
    }
  }
}
</script>
<style lang="scss">
.membership-package {

}
</style>

